<template>
  <div class="views-container">
    <div class="wlm-table">
      <!-- 工具条区域 -->
      <div class="wlm-table-hearder-btn">
        <el-button size="small" type="primary" @click="showdialog(1)"
          >添加兑换码</el-button
        >
         <el-button plain icon="document" :data-query="JSON.stringify(tableFormatData.mainTable.files)" v-exceldown="{path:'cardCodeExportCdKey&',query: {}}">导出兑换码</el-button>
      </div>
      <!-- 工具条区域 end -->
      <!-- 表格区域 -->
      <div class="wlm-table-content">
        <el-table
          :ref="tableFormatData.mainTable.key"
          :default-sort="{ prop: 'sort', order: 'descending' }"
          :data="tableFormatData.mainTable.tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column prop="code" label="兑换码" />
          <el-table-column prop="title" label="卡信息" />
          <el-table-column prop="number" label="兑换次数" />
          <el-table-column prop="remarks" label="备注" />
          <el-table-column prop="is_use" label="使用状态">
            <template slot-scope="scope">
              <span v-if="scope.row.is_use == 1">已使用</span>
              <span v-if="scope.row.is_use == 2">未使用</span>
            </template>
          </el-table-column>
          <el-table-column prop="use_time" label="兑换时间">
            <template slot-scope="scope">
              {{ scope.row.use_time | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="生成时间" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                @click="delTableItem(scope.row.code)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.mainTable.pagination.page"
            :page-sizes="tableFormatData.mainTable.pagination.pagesizes"
            :page-size.sync="tableFormatData.mainTable.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="
              hasTableData ? tableFormatData.mainTable.pagination.total : 0
            "
          >
          </el-pagination>
        </div>
      </div>
      <!-- 表格区域 end -->
      <!-- 表单区域 -->
      <el-dialog
        @close="saveDialogForm"
        :visible.sync="dialogFormVisible"
        custom-class="reset-pwd wlm-form-dialog dialog-table"
      >
        <div class="wlm-form" v-if="dialogFormVisible">
          <div class="wlm-form-header wlm-dialog-fixheader">
            <span class="wlm-dialog-inlenr">卡包分类</span>
          </div>
          <el-scrollbar wrap-class="scrollbar-wrapper">
            <div class="wlm-form-content">
              <div class="wlm-dialog-main">
                <div class="wlm-dialog-content">
                  <el-form
                    :ref="formFormatData.key"
                    :model="formFormatData.formData"
                    :rules="formFormatData.rules"
                    size="small"
                    label-width="100px"
                    class="retail-form"
                    label-position="right"
                  >
                    <el-form-item label="卡信息：">
                      <el-select
                        filterable
                        v-model="formFormatData.formData.card_id"
                        placeholder="请选择卡信息："
                      >
                        <el-option
                          v-for="item in cardCate"
                          :key="item.card_id"
                          :label="item.title"
                          :value="item.card_id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="兑换次数" prop="number">
                      <el-input-number
                        class="wlm-input-auto"
                        v-model="formFormatData.formData.number"
                        :min="1"
                        :precision="0"
                        placeholder="请输入兑换次数"
                        style="width: 160px"
                        :controls="false"
                      />
                    </el-form-item> -->
                    <el-form-item label="生成个数" prop="num">
                      <el-input-number
                        class="wlm-input-auto"
                        v-model="formFormatData.formData.num"
                        :min="1"
                        :precision="0"
                        placeholder="请输入生成个数"
                        style="width: 160px"
                        :controls="false"
                      />
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <footer
          class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter"
        >
          <el-button size="small" @click="formFormatSubmit" type="primary"
            >保存</el-button
          >
        </footer>
      </el-dialog>
      <!-- 表单区域 end -->
    </div>
  </div>
</template>

<script>
import fp from "lodash/fp";
import {
  cardCodeIndex,
  cardCodeDel,
  cardCodeAdd,
  cardLists,
} from "@/api/cardBag";
import mixins from "@/mixins/mixins";
import ChooseFiles from "@/components/ChooseFiles/index";
import exceldown from '@/directive/exceldown'
export default {
  mixins: [mixins.getters("Table"), mixins.getters("Form")],
  components: {
    ChooseFiles,
  },
  directives: {
    exceldown
  },
  data() {
    return {
      // 卡信息列表的数据
      cardCate: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      chooseLogoConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          model: "display",
        },
        initList: [],
        // isShowList: true,
        file_type: "image",
        bindKey: {
          key: "image",
          model: "img",
        },
      },
      tableFormatData: {
        current: "mainTable",
        mainTable: {
          key: "mainTable",
          api: {
            getList: cardCodeIndex,
            delList: cardCodeDel,
          },
          tableData: [],
          files: {},
          rowId: "code",
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0,
          },
        },
      },
      formFormatData: {
        key: "mainTable",
        model: {
          noCreateEdit: false,
          bindDialog: "dialogFormVisible",
        },
        api: {
          submitForm: cardCodeAdd,
        },
        formData: {
          card_id: "",
          number: "",
          num: "",
        },
        rules: {
          card_id: [
            {
              message: "请输入兑换次数",
              required: true,
              trigger: "change",
            },
          ],
          // number: [
          //   {
          //     message: "请输入兑换次数",
          //     required: true,
          //     trigger: "change",
          //   },
          // ],
          num: [
            {
              message: "请输入生成个数",
              required: true,
              trigger: "change",
            },
          ],
        },
      },
    };
  },
  mounted() {
    this.fetchCardCate();
  },
  methods: {
    showdialog(type, params) {
      if (type === 1) {
        // this.formFormatData=[]
        this.formFormatData.api.submitForm = cardCodeAdd;
        this.dialogFormVisible = true;
      }
      if (type === 2) {
        this.formFormatData.api.submitForm = cardCodeAdd;
        this.formFormatDialogEditEvt({
          id: params,
          toggle: "dialogFormVisible",
        });
      }
    },
    saveDialogForm() {
      this.resetDialogFormData({
        name: "",
        sort: "",
        is_show: "",
        image: [],
      });
    },
    fetchCardCate() {
      cardLists({
        page: 1,
        list_rows: 1000,
        type: 1
      })
        .then((res) => {
          this.cardCate = fp.get("data.data.data", res) || [];
          console.log("fetchCardCate res", res, this.cardCate);
        })
        .catch((err) => {
          console.log("fetchCardCate err", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>